<template>
  <div class="waiting-info">
    <div class="list-title-setting" v-if="optionsInfo.headerBox">
      <div class="title-info">
        <el-divider content-position="left">列表头部</el-divider>
      </div>
      <!-- <el-form-item label="表头内容">
        <el-input  placeholder="队列1名称" v-model="optionsInfo.headerName[0]" clearable /> - <el-input v-model="optionsInfo.headerName[1]" placeholder="队列2名称" clearable />
      </el-form-item> -->
      <el-form-item label="列表标题" class="col-info">
          <el-radio-group v-model="optionsInfo['titleType']">
            <el-radio  v-for="(item) in titleTypeOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.headerBackgroundColor"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.headerFontColor"/>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
    </div>
    <div class="list-item-setting" v-if="optionsInfo.contentBOx">
      <div class="title-info">
        <el-divider content-position="left">列表区域设置</el-divider>
      </div>
      <el-form-item label="展示列数" v-if="optionsInfo.showRowNumsOnOff">
        <el-input-number
            :min="4"
            :max="6"
            v-model="optionsInfo.showRowNums"
            class="hide-spin-button"
            size="small"
            @change="handleTotal"
        />
      </el-form-item>
      <el-form-item label="行高">
        <el-input-number
            v-model="optionsInfo.lineHeight"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="内容高度">
        <el-input-number
            v-model="optionsInfo.contentHeight"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
    </div>
    <div class="list-scroll-setting">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>
      <el-form-item label="开启滚动" v-if="false">
        <el-switch v-model="optionsInfo.openScroll"/>
      </el-form-item>
      <el-form-item label="滚动速度" v-if="false">
        <el-input-number
            v-model="optionsInfo.scrollStep"
            :min="0"
            :max="4"
            :disabled="!(optionsInfo.openScroll)"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="是否切屏" v-if="false">
        <el-switch v-model="optionsInfo.switchScreen"></el-switch>
      </el-form-item>
      <el-form-item label="切屏时间(s)">
        <el-input-number
            :min="10"
            :step="1"
            v-model="optionsInfo.switchTime"
            :disabled="!(optionsInfo.switchScreen)"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
    </div>

    <!--等待就诊滚动设置-->
    <div class="wait-visit-setting">
      <div class="title-info">
        <el-divider content-position="left">等待就诊</el-divider>
      </div>
      <el-form-item label="开启滚动">
        <el-switch v-model="optionsInfo.openScroll"/>
      </el-form-item>

      <el-form-item label="开启滚动数量">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.waitingNumber"
        />
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number
            :min="1"
            :max="5"
            size="small"
            class="hide-spin-button"
            :disabled="!(optionsInfo.openScroll)"
            v-model="optionsInfo.waitingVisitStep"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">诊室设置</el-divider>
      </div>
      <div>
        <roomNameKeyEditor
            businessType="special"
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </div>
    </div>

  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import Draggable from "vuedraggable"
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "sceneWaitingCallRecordsTwoQueueMulTwoColus-editor",

  componentName: "sceneWaitingCallRecordsTwoQueueMulTwoColus-editor",

  components: {
    roomNameKeyEditor,
    Draggable
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      optionsInfo:Object(),
      predefineColors: types['predefineColors'],
      titleTypeOptions: [
        {
          value: 'treatmentRoomName',
          label: '诊室'
        },
        {
          value: 'registerObjNames',
          label: '号别'
        },
        {
          value: 'deptName',
          label: '科室'
        },
        {
          value: 'treatmentRoomName-registerObjNames',
          label: '诊室-号别'
        }
      ],
    }
  },

  computed: {
    isDisabled() {
      return function (val) {
        let arr = ['deptName', 'treatmentRoomName', 'workerName'];
        return arr.includes(val);
      }
    }
  },

  methods: {
    handleDragEnd() {

    },

    handleTotal(val){
      let {multiple} = (this.optionModel.waitingRowInfoConfig)
      this.optionModel.rowNumber = multiple*val;
      console.log(this.optionModel)
    }

  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.col-info {
  ::v-deep .el-form-item__content {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: 100%;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }

}
</style>